<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				$("#tab1").click(function(){
					$("#tab1").css("background-color","orange").siblings().css("background-color","#d3d3d3");
					$("#big").html("tab文字内容1");
				});
			$("#tab2").click(function(){
					$("#tab2").css("background-color","orange").siblings().css("background-color","#d3d3d3");
					$("#big").html("tab文字内容2");
			});
			$("#tab3").click(function(){
					$("#tab3").css("background-color","orange").siblings().css("background-color","#d3d3d3");
					$("#big").html("tab文字内容3");
				});
			});
		</script>
		<style>
					ul{
						/* border: 1px solid red; */
						height: 50px;
						width: 300px;
						margin: 0;
						padding: 0;
					}
					ul li{
						width: 80px;
						height: 50px;
						list-style: none;
						float: left;
						line-height: 50px;
						text-align: center;
						margin-right: 15px;
						background-color: #d3d3d3;
					}
					div{
						height: 300px;
						width: 500px;
						background-color: orange;
						line-height: 300px;
						text-align: center;
					}
				</style>
	</head>
	<body>
		<ul>
				<li id="tab1">tab01</li>
				<li id="tab2">tab02</li>
				<li id="tab3">tab03</li>
		</ul>
		<div id="big"></div>
	</body>
</html>